<template>
    <div class="app-container">
      <!-- 数据视图头部 -->
      <div class="view-header">
        <div class="title">数据视图</div>
        <el-button type="primary" @click="createView">创建新视图</el-button>
      </div>
  
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in 3" :key="index">
            <el-input v-model="searchForm[`name${index + 1}`]" placeholder="请输入内容"></el-input>
          </el-col>
        </el-row>
        <div class="search-buttons">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
  
      <!-- 视图列表 -->
      <div class="table-container">
        <div class="table-header">
          <span>视图组件列表</span>
          <el-button type="primary">批量操作</el-button>
        </div>
        
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="视图名称" width="120"></el-table-column>
          <el-table-column prop="description" label="视图描述" width="200"></el-table-column>
          <el-table-column prop="componentCount" label="包含组件数量" width="100"></el-table-column>
          <el-table-column prop="chartType" label="布局类型" width="100"></el-table-column>
          <el-table-column prop="modelStatus" label="模型评估" width="100"></el-table-column>
          <el-table-column prop="evaluationScore" label="评估结果" width="100"></el-table-column>
          <el-table-column prop="dataSource" label="数据预测" width="100"></el-table-column>
          <el-table-column prop="accuracy" label="预测结果" width="120"></el-table-column>
          <el-table-column prop="updateCycle" label="更新周期" width="100"></el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="total"
            :current-page="currentPage"
            @current-change="handlePageChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, reactive } from 'vue'
  
  export default {
    name: 'DataWindowDetail',
    setup() {
      const searchForm = reactive({
        name1: '',
        name2: '',
        name3: ''
      })
  
      const tableData = ref([
        {
          name: '股票视图',
          description: '基于wind库，获取天级别股票行情数据',
          componentCount: 4,
          chartType: '网格布局',
          modelStatus: '是',
          evaluationScore: '优',
          dataSource: '是',
          accuracy: '正确率: 80%',
          updateCycle: '天'
        }
      ])
  
      const currentPage = ref(1)
      const total = ref(100)
  
      const createView = () => {
        console.log('创建新视图')
      }
  
      const handleSearch = () => {
        console.log('搜索', searchForm)
      }
  
      const handleReset = () => {
        Object.keys(searchForm).forEach(key => {
          searchForm[key] = ''
        })
      }
  
      const handleEdit = (row) => {
        console.log('编辑', row)
      }
  
      const handlePageChange = (page) => {
        currentPage.value = page
      }
  
      return {
        searchForm,
        tableData,
        currentPage,
        total,
        createView,
        handleSearch,
        handleReset,
        handleEdit,
        handlePageChange
      }
    }
  }
  </script>
  
  <style scoped>
  .app-container {
    padding: 20px;
  }
  
  .view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .search-area {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
  }
  
  .search-buttons {
    margin-top: 20px;
    text-align: center;
  }
  
  .table-container {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>